<template>
  <div>
    <!-- 标题栏 -->
    <mt-header class="" title="学前端 到大内" fixed>
      <div slot="right">
       <router-link to="/login">登录&nbsp;</router-link>
       <router-link to="/register">注册</router-link>
      </div>
    </mt-header>
  <!-- 导航 -->
  <mt-navbar class="header" v-model="navactive" fixed>
     <mt-tab-item  :id="item.id +''" v-for="(item,i) in cats" :key="i">{{item.category_name}}</mt-tab-item>
     <!-- <mt-tab-item id="2">电商</mt-tab-item>
     <mt-tab-item id="3"> 网页</mt-tab-item>
     <mt-tab-item id="4">交互</mt-tab-item> -->
  </mt-navbar>
  <!-- 面板  :infinite-scroll-immediate-check="true" 不满屏幕就加载 满了就不加-->
  <mt-tab-container class="container" >
    <mt-tab-container-item 
       infinite-scroll-distance="30"
       v-infinite-scroll="loadmore"
       infinite-scroll-disabled="busy"
       :infinite-scroll-immediate-check="true">

    <mt-swipe class="myswipe" :style="{'height' :h}" 
        
        :speed="200"
        :auto="4000"
        :continuous="true"
        :showIndicators="false">
            <mt-swipe-item>
                <img src="/banner/1.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="/banner/2.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="/banner/3.jpg" alt="">
            </mt-swipe-item>
        </mt-swipe>
    <div class="articleItem" v-for="(item,i) in articles" :key="i">
      <!-- 跳转到详情页 -->
      <router-link :to="`/article?id=${item.id}`">
      <!-- 文章标题开始 -->
      <div class="articleItem-header" >{{item.subject}}</div>
      <!-- 文章标题结束 -->
      <!-- 文章图文信息开始 -->
      <div class="articleItem-wrapper">
        <!-- 文章图像开始  -->
        <div class="articleImg">
          <!-- v-if="item.image" -->
          <img v-if="item.image" :src="`/articles/${item.image}`">
        </div>
        <!-- 文章图像结束 -->
        <!-- 文章简介开始 -->
        <div class="articleDes">
          {{item.description}}
        </div>
        <!-- 文章简介结束 --> 
      </div>
      <!-- 文章图文信息结束 -->
      </router-link>
    </div>
    <!-- 单一文章信息结束 -->
    </mt-tab-container-item>
    <!-- <mt-tab-container-item id="2">面板2</mt-tab-container-item>
    <mt-tab-container-item id="3">面板3</mt-tab-container-item>
    <mt-tab-container-item id="4">面板4</mt-tab-container-item> -->
  </mt-tab-container>
  <!-- 底部选项卡 -->
  <mt-tabbar v-model="selected" fixed>
    <mt-tab-item id="main">首页
      <img v-if="selected=='main'" src="../assets/img/main_1.png" slot="icon">
      <img v-else src="../assets/img/main_0.png" slot="icon">
    </mt-tab-item>
    <mt-tab-item id="me">我的
       <img  v-if="selected=='me'" src="../assets/img/me_1.png" slot="icon">
       <img  v-else src="../assets/img/me_0.png" slot="icon">
    </mt-tab-item>
  </mt-tabbar>
  </div>
</template>
<script>
export default {
    data(){
      return{
        navactive:'1',
        selected:'main',
         h:'0px',
         cats:[] ,  //保存类别列表[{id:1,naem:'UI'},{},...]
        articles:[],//保存当前文章列表
        busy:false,//是否禁用无限滚动功能
        page:1,//保存当前页码,默认为第一页
      }
    },
       //页面挂载完成后呼吸性该生命周期的方法
    mounted() {
  ///发送http请求,获取UI类别下的第一页文章列表
   this.loadArticles(1,1,(arts)=>{
     this.articles=arts;;//讲服务端返回的结果设置为当前列表
   })

    //发送http请求获取UI类别下的第一页文章列表
    this.axios.get('/articles?cid=1&page=1').then(result=>{
      console.log(result);
      //把文章列表数据存入data,共页面进行列表渲染
      this.articles=result.data.results;
     
    })


   
     //发送http请求 获取类别列表
    this.loadCategory();
    //计算轮播图的高度
     this.initSwipeHeight();
       
    },
    watch:{
      //监听导航的变化
      navactive(newval){
        console.log(newval);//newval即是当前击活项的类别ID
     //是窗口滚动条滚动到(0,0)的位置
        window.scrollTo(0,0);
      //切换导航,显示的是第一页  
        this.page=1;
        //发送http请求,获取响应数据,更新文章列表(模板字符串 反引号)
        this.loadArticles(newval,1,(arts)=>{
          this.articles=arts;
        })
        // this.axios.get(`/articles?cid=${newval}&page=1`).then(res=>{
        //   console.log(res);
        //   //更新data中的数据
        //   this.articles=res.data.results;
        // })
      },
      //监听底部选项卡的变化 两个页面只需要一个参数
      selected(newval){

        //可以滚动到页面的顶部，就是交完显卡的时候滚到头儿嘛，滚到顶嘛。
        if(newval=='main'){
        this.$router.push('/')
        }else{
          this.$router.push('/me')//路径 /me映射到me.vue
        }
      }
    },
    methods:{
      //发送http请求,加载文章列表
      //cid:文章类别Id
      //page:页码
      //callback:回调函数
      loadArticles(cid,page,callback){
        //弹出加载提示框
        //this.$indicator 就是Indicator对象
        //在vue.use(MintUI)时,为Vue.prototype.$indicator赋的值
        this.$indicator.open({
          //菊花框
          text:'加载中...',
          spinnerType:'snake'
        });
        this.axios.get(`/articles?cid=${cid}&page=${page}`).then(res=>{
          callback(res.data.results);
          // 隐藏菊花框 放在callback之前之后都可以
          this.$indicator.close();
        })
      },
      //触底加载下一页文章列表
      loadmore(){
        console.log(`loadmore...`);
        //发请求,加载下一页数据,追加到当前列表末尾
        let cid=this.navactive;//navactive当前的类别ID
        this.page++;//当前页码加1
        let page=this.page;//下一页页码
        console.log(`loadmore -- cid:${cid} page:${page}`);
        this.busy=true;
        this.loadArticles(cid,page,(arts)=>{
          this.articles.push(...arts);
          this.busy=false;
        })
        // this.axios.get(`articles?cid=${cid}&page=${page}`).then(res=>{
        //   console.log(res);
        // //更新当前data中的articles数组(把后面的追加到前面的后面)
        // this.articles.push(...res.data.results);
        //   this.busy=false;//重新启用无限滚动
        // })
      },
      //发送http请求,加载类别列表到界面
      loadCategory(){
            //发送http请求 获取类别列表
    this.axios.get('/category').then(result=>{
      console.log(result);
      let cats=result.data.results;
      //保存到data中
      this.cats=cats;
    })
      },
      //c初始化轮播图的高度 (封装)
      initSwipeHeight(){
             //计算轮播图的高度,对h进行赋值
        let picw=1242;//宽度
        let pich=698;//高度
        let imgw=window.screen.width;//屏幕的宽度
        let imgh=((imgw * pich)/picw) +'px' ;//屏幕高
        this.h=imgh;
      },
    },
}
</script>
<style scoped>
.is-right a{
  color:white;
}
.container{margin-top: 90px; margin-bottom: 55px;}
.header{margin-top: 40px;}
.myswipe img{width: 100%;}

.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>

